<!doctype html>
<html lang="en" class="h-100">

<head>
  <title>Hands-On Selenium WebDriver with Java</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Boni Garcia">

  <link rel="icon" type="image/png" href="img/hands-on-icon.png">

  <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="d-flex flex-column h-100">
  <main class="flex-shrink-2">
    <div class="container">
      <div class="row py-2">
        <div class="col col-10">
          <h1 class="display-4">Hands-On Selenium WebDriver with Java</h1>
          <h5>Practice site</h5>
        </div>
        <div class="col col-2">
          <a href="https://github.com/bonigarcia/selenium-webdriver-java"><img class="img-fluid"
              src="img/hands-on-icon.png"></a>
        </div>
      </div>
      <div class="row">
        <div class="col col-12">
          <hr class="my-4">
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <h1 class="display-6">Dialog boxes</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-2 py-2">
          <button type="button" class="btn btn-outline-primary" id="my-alert">Launch alert</button>
        </div>
        <div class="col-sm-2 py-2">
          <button type="button" class="btn btn-outline-success" id="my-confirm">Launch confirm</button>
          <p id="confirm-text" class="lead"></p>
        </div>
        <div class="col-sm-2 py-2">
          <button type="button" class="btn btn-outline-danger" id="my-prompt">Launch prompt</button>
          <p id="prompt-text" class="lead"></p>
        </div>
        <div class="col-sm-2 py-2">
          <button type="button" class="btn btn-outline-warning" id="my-modal" data-bs-toggle="modal"
            data-bs-target="#example-modal">Launch modal</button>
          <p id="modal-text" class="lead"></p>
          <div class="modal fade" id="example-modal" tabindex="-1">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                </div>
                <div class="modal-body">
                  This is the modal body
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary model-button" data-bs-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary model-button" data-bs-dismiss="modal">Save
                    changes</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Copyright &copy; 2021-2022 <a href="https://bonigarcia.dev/">Boni Garc&iacute;a</a></span>
    </div>
  </footer>
  <script>
    document.getElementById("my-alert").addEventListener("click", function () {
      alert("Hello world!");
    });
    document.getElementById("my-confirm").addEventListener("click", function () {
      let correct = confirm("Is this correct?");
      updateTextElement("confirm-text", "You chose: " + correct);
    });
    document.getElementById("my-prompt").addEventListener("click", function () {
      let username = prompt("Please enter your name");
      updateTextElement("prompt-text", "You typed: " + username);
    });
    document.querySelectorAll(".model-button").forEach(button => {
      button.addEventListener("click", function () {
        updateTextElement("modal-text", "You chose: " + this.innerText);
      });
    });
    function updateTextElement(elementId, text) {
      document.getElementById(elementId).innerText = text;
    }
  </script>
</body>

</html>